import 'package:flex_demo/widgets/flex_demo.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Flex布局实践 Demo',
      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        cardTheme: CardTheme(elevation: 3,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12)),
        ),
      ),
      home: const FlexLayoutDemo(),
    );
  }
}

class FlexLayoutDemo extends StatelessWidget {
  const FlexLayoutDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flex布局实践'),
        centerTitle: true,
        actions: [
          IconButton(
              icon: const Icon(Icons.info),
              onPressed: () {
                showDialog(context: context,
                    builder: (context) =>
                     AlertDialog(
                      title:const Text('关于Flex布局'),
                      content:const Text(
                        'Flutter使用Expanded和Flexible实现类似Android的weight属性\n\n'
                            'Expanded = Flexible(fit: FlexFit.tight)\n'
                            'Flexible默认fit: FlexFit.loose',
                      ),
                      actions: [
                        TextButton(onPressed: ()=>Navigator.pop(context), child: const Text('确定'),)
                      ],),);
              },),
        ],
      )
      ,
      body: const SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: FlexDemo(),
      ),
    );
  }

}
